<template>
	<view class="container">
		<!-- 选项卡导航 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { 'active': current === index }]"
				@click="current = index">
				{{ tab }}
			</view>
		</view>

		<!-- 货源信息的内容 -->
		<view v-if="current === 0" class="content-section">
			<view class="form-item">
				<view class="wenzi">货源线路<text
						style="position: absolute; right: 70rpx; color: #f00; font-size: 25rpx;">*必填</text></view>
				<view class="picker-group">
					<view class="picker-row">
						<picker mode="selector" :range="loadingPlaces" range-key="name" @change="onLoadingPlaceChange"
							class="address-picker">
							<view class="picker">
								{{ formData.shippingaddress || '请选择装货地' }}
								<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
							</view>
						</picker>
						<text class="address-book" @click="openAddressBook('loading')">地址薄</text>
					</view>
					<view class="picker-row">
						<picker mode="selector" :range="unloadingPlaces" range-key="name"
							@change="onUnloadingPlaceChange" class="address-picker">
							<view class="picker">
								{{ formData.unloadingaddress || '请选择卸货地' }}
								<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
							</view>
						</picker>
						<text class="address-book" @click="openAddressBook('unloading')">地址薄</text>
					</view>
				</view>
			</view>

			<view class="form-section">
				<text class="wenzi">
					运输信息<text style="position: absolute; right: 70rpx; color: #f00; font-size: 25rpx;">*必填</text>
				</text>

				<!-- 货物名称 -->
				<view class="form-row">
					<text class="label">货物名称</text>
					<picker mode="selector" :range="cargoOptions" range-key="name" @change="onCargoChange">
						<view class="value">
							{{ formData.cargoname || '请选择货物名称' }}
							<uni-icons type="arrowright" size="16" color="#999" />
						</view>
					</picker>
				</view>

				<!-- 运输总量 -->
				<view class="form-row">
					<text class="label">运输总量</text>
					<view class="input-wrap">
						<input type="number" v-model="formData.totalweight" placeholder="请输入运输总量" class="input"
							style="padding-left: 200rpx; " />
						<text class="unit">吨</text>
					</view>
				</view>

				<!-- 运费单价 -->
				<view class="form-row">
					<text class="label">运费单价(含税)</text>
					<view class="input-wrap">
						<input type="number" v-model="formData.unitprice" placeholder="请输入运费单价" class="input"
							style="padding-left: 200rpx;" />
						<text class="unit red">元/吨</text>
					</view>
				</view>

				<!-- 供应商 -->
				<view class="form-row">
					<text class="label">供应商</text>
					<picker mode="selector" :range="suppliers" range-key="name" @change="onSupplierChange">
						<view class="value">
							{{ formData.supplierName || '请选择供应商' }}
							<uni-icons type="arrowright" size="16" color="#999" />
						</view>
					</picker>
				</view>
			</view>
			<button class="primary-btn" @click="validateAndNext">下一步</button>
		</view>

		<!-- 接单条件的内容 -->
		<view v-if="current === 1" class="content-section">
			<view class="form-card">
				<text class="wenzi">货源期限<text
						style="position: absolute; right: 70rpx; color: #f00; font-size: 25rpx;">*必填</text></text>
				<view class="date-group">
					<!-- 开始时间选择 -->
					<view class="date-item">
						<text>开始时间</text>
						<!-- <picker mode="date" :value="formData.starttime" @change="onStartDateChange">
							<view class="picker">
								{{ formData.starttime || '请选择日期' }}
								<uni-icons type="arrowright" size="16" color="#999" />
							</view>
						</picker> -->
						<view class="input-wrapper">
							<uni-datetime-picker v-model="formData.starttime" :minDate="getCurrentDate()"
								@change="handleTimeChange" />
						</view>
					</view>
					<!-- 结束时间选择 -->
					<view class="date-item">
						<text>结束时间</text>
						<view class="input-wrapper">
							<uni-datetime-picker v-model="formData.endtime" :minDate="getCurrentDate()"
								@change="handleTimeChange1" />
						</view>
						<!-- <picker mode="date" :value="formData.endtime" @change="onEndDateChange">
							<view class="picker">
								{{ formData.endtime || '请选择日期' }}
								<uni-icons type="arrowright" size="16" color="#999" />
							</view>
						</picker> -->
					</view>
				</view>
			</view>

			<view class="form-card">
				<view class="switch-container">
					<view class="switch-label">
						<text class="wenzi" style="display: inline-block; margin-bottom: 20rpx;">专属货源</text>
						<text class="description">仅被指定分组的车辆可以接单</text>
					</view>
					<switch :checked="formData.isExclusiveSource" @change="onSwitchChange" active-color="#007aff">
					</switch>
				</view>
				<button v-if="formData.isExclusiveSource" class="secondary-btn"
					@click="addTransportTeam">添加运输车队</button>
			</view>

			<view class="form-card" v-if="formData.isExclusiveSource && formData.selectedTeams.length > 0">
				<text class="form-title">已选择的车队</text>
				<view class="team-item" v-for="(team, index) in formData.selectedTeams" :key="team.id">
					<image src="../../../static/chedui/1.png" class="team-logo" style="width: 50rpx; height: 50rpx; " />
					<text>{{ team.teamName }}</text>
					<text>{{ team.teamNumber }}辆车</text>
					<text class="remove-btn" @click="removeTeam(index)">删除</text>
				</view>
			</view>

			<view class="form-card">
				<view class="switch-container">
					<view class="switch-label">
						<text class="wenzi" style="display: inline-block; margin-bottom: 20rpx;">亏吨扣费</text>
						<text class="description">车辆实际运输重量低于订单重量时，按亏吨扣费</text>
						<button class="btn" @click="navigateToPage">填写</button>
					</view>
				</view>
			</view>

			<view class="form-card">
				<text class="wenzi" style="display: inline-block; margin-bottom: 20rpx;">费用信息</text>
				<text class="form-subtitle">运费结算时自动扣除</text>
				<view style="display: flex; align-items: center;" v-if="peizhidx.driverservicerates=='1'">
					<text class="label">司机服务费率</text>
					<input type="number" placeholder="司机服务费率 %" v-model="formData.driverservicerate" class="input"
						style="padding-left: 350rpx;" />
					<text style="line-height: 80rpx;">%</text>
				</view>
				<view style="display: flex;align-items: center;" v-if="peizhidx.fuelcost==1">
					<text class="label">油费</text>
					<input type="number" placeholder="油费" v-model="formData.fuelCost" class="input"
						style="padding-left: 300rpx;" />
					<text style="line-height: 80rpx; font-size: 28rpx;">元/车</text>
				</view>
				<view style="display: flex;align-items: center;" v-if="peizhidx.informationfee==1">
					<text class="label">信息费</text>
					<input type="number" placeholder="信息费" v-model="formData.informationfee" class="input"
						style="padding-left: 302rpx;" />
					<text style="line-height: 80rpx; font-size: 28rpx;">元/车</text>
				</view>
			</view>

			<button class="primary-btn" @click="validateAndNext">下一步</button>
		</view>

		<!-- 预约确认的内容 - 优化后的版本 -->
		<view v-if="current === 2" class="content-section">
			<!-- 运输信息卡片 -->
			<view class="confirm-card">
				<view class="card-header">
					<text class="card-title">运输信息</text>
				</view>
				<view class="card-body">
					<view class="confirm-row">
						<text class="confirm-label">运输线路</text>
						<view class="confirm-value route-info">
							<text class="time">开始时间&nbsp;:&nbsp;&nbsp;{{ formData.starttime }}</text>
							<view class="address-item">
								<text class="address-tag">装</text>
								<text class="address">{{ formData.shippingaddress }}</text>
							</view>
							<view class="address-item">
								<text class="address-tag1">卸</text>
								<text class="address">{{ formData.unloadingaddress }}</text>
							</view>
							<text class="time1">结束时间&nbsp;:&nbsp;&nbsp;{{ formData.endtime }}</text>
						</view>
					</view>

					<view class="confirm-row">
						<text class="confirm-label">货物信息</text>
						<view class="confirm-value">
							<text class="goods-name">货物名称: {{ formData.cargoname }}</text>
							<text class="goods-weight">发货总量: {{ formData.totalweight }}吨</text>
						</view>
					</view>

					<view class="confirm-row">
						<text class="confirm-label">运费单价</text>
						<text class="confirm-yuan">{{ formData.unitprice }}元/吨(含税)</text>
					</view>

					<view class="confirm-row" v-if="formData.supplierName">
						<text class="confirm-label">供应商</text>
						<text class="confirm-value">{{ formData.supplierName }}</text>
					</view>
				</view>
			</view>

			<!-- 接单条件卡片 -->
			<view class="confirm-card">
				<view class="card-header">
					<text class="card-title">接单条件</text>
				</view>
				<view class="card-body">
					<view class="confirm-row">
						<text class="confirm-label">专属货源</text>
						<text class="confirm-values">{{ formData.isExclusiveSource ? '是' : '否' }}</text>
					</view>

					<view class="confirm-row" v-if="peizhidx.driverservicerates=='1'">
						<text class="confirm-label">司机服务费率</text>
						<text class="confirm-values"><text>{{ formData.driverservicerate }}</text>%</text>
					</view>

					<view class="confirm-row" v-if="peizhidx.fuelcost==1">
						<text class="confirm-label">油费</text>
						<text class="confirm-values"><text>{{ formData.fuelCost }}</text>元/车</text>
					</view>

					<view class="confirm-row" v-if="peizhidx.informationfee==1">
						<text class="confirm-label">信息费</text>
						<text class="confirm-values"><text>{{ formData.informationfee }}</text>元/车</text>
					</view>
				</view>
			</view>

			<!-- 专属车队卡片 -->
			<view class="confirm-card team-card" v-if="formData.isExclusiveSource && formData.selectedTeams.length > 0">
				<view class="card-header">
					<text class="card-title">专属车队</text>
				</view>
				<view class="card-body">
					<view class="team-list">
						<view class="team-item" v-for="(team, index) in formData.selectedTeams" :key="team.id">
							<view class="team-info">
								<image src="../../../static/chedui/1.png" class="team-logo" />
								<view class="team-details">
									<text class="team-name">{{ team.teamName }}</text>
									<text class="team-count">{{ team.teamNumber }}辆车</text>
								</view>
							</view>
							<text class="remove-btn" @click="removeTeam(index)">删除</text>
						</view>
					</view>
				</view>
			</view>

			<button class="confirm-btn" @click="submitAllData">确认发布货源</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		http
	} from '../../../config/request.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		useuser
	} from '../../../stores/user.js';
	const user = useuser();

	const current = ref(0);
	const tabs = ref(['货源信息', '接单条件', '预约确认']);

	// 表单数据
	const formData = ref({
		shippingaddress: "",
		unloadingaddress: "",
		cargoname: "",
		totalweight: "",
		unitprice: '0.0',
		supplierId: "",
		shipperid: "",
		supplierName: "",
		starttime: null,
		endtime: null,
		isExclusiveSource: false,
		driverservicerate: '',
		fuelCost: '',
		informationfee: '',
		selectedTeams: [],
		confirmedRoute: {
			loading: '',
			unloading: ''
		}
	});

	//后端接受对象
	const duixiang = ref({});
	//配置对象
	const peizhidx = ref({});

	// 选择器索引
	const loadingPlaceIndex = ref(-1);
	const unloadingPlaceIndex = ref(-1);
	const cargoIndex = ref(-1);
	const supplierIndex = ref(-1);

	// 选择器选项
	const loadingPlaces = ref([]);
	const unloadingPlaces = ref([]);
	const cargoOptions = ref([]);
	const suppliers = ref([]);
	// 获取当前时间的方法，格式化为 uni-datetime-picker 所需的格式
	const getCurrentDate = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		const hour = String(now.getHours()).padStart(2, '0');
		const minute = String(now.getMinutes()).padStart(2, '0');
		return `${year}-${month}-${day} ${hour}:${minute}`;
	};
	const handleTimeChange = (e) => {
	    if (e) {
	        const date = new Date(e);
	        const year = date.getFullYear();
	        const month = String(date.getMonth() + 1).padStart(2, '0');
	        const day = String(date.getDate()).padStart(2, '0');
	        const hours = String(date.getHours()).padStart(2, '0');
	        const minutes = String(date.getMinutes()).padStart(2, '0');
	        formData.value.starttime = `${year}-${month}-${day} ${hours}:${minutes}`;
	    } else {
	        console.error('事件对象格式不正确，无法获取选择的时间值');
	    }
	};
	
	const handleTimeChange1 = (e) => {
	    if (e) {
	        const date = new Date(e);
	        const year = date.getFullYear();
	        const month = String(date.getMonth() + 1).padStart(2, '0');
	        const day = String(date.getDate()).padStart(2, '0');
	        const hours = String(date.getHours()).padStart(2, '0');
	        const minutes = String(date.getMinutes()).padStart(2, '0');
	        formData.value.endtime = `${year}-${month}-${day} ${hours}:${minutes}`;
	    } else {
	        console.error('事件对象格式不正确，无法获取选择的时间值');
	    }
	};
	// 从后端获取数据
	const fetchData = async () => {
		try {
			// 获取装货地和卸货地数据
			const res1 = await http({
				url: '/station/selectAll',
				method: 'GET'
			});
			console.log("装货地和卸货地数据：" + res1);
			if (res1.code === 20041) {
				loadingPlaces.value = res1.shuju.map(item => ({
					name: item.stationName,
					id: item.id
				}));
				unloadingPlaces.value = res1.shuju.map(item => ({
					name: item.stationName || item.stationName,
					id: item.id
				}));
			} else {
				throw new Error(res1.message || '获取装货地和卸货地数据失败');
			}

			// 获取货物数据
			const res3 = await http({
				url: '/cargo/selectAll',
				method: 'get',
			});
			console.log("货物数据：" + res3);
			if (res3.code === 20041) {
				cargoOptions.value = res3.shuju.map(item => ({
					name: item.cargoName,
					id: item.id,
				}));
			} else {
				throw new Error(res3.message || '获取货物数据失败');
			}

			// 获取供应商数据
			const res2 = await http({
				url: '/chaxungongyingshang',
				method: 'post'
			});
			console.log("供应商数据：" + res2);
			if (res2.code === 20041) {
				suppliers.value = res2.shuju.map(item => ({
					name: item.supplierName,
					id: item.id,
					shipperid: item.shipperid
				}));
			} else {
				throw new Error(res2.message || '获取供应商数据失败');
			}
		} catch (error) {
			console.error('获取数据失败:', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};

	// 方法定义
	const onLoadingPlaceChange = (event) => {
		loadingPlaceIndex.value = event.detail.value;
		formData.value.shippingaddress = loadingPlaces.value[loadingPlaceIndex.value]?.name || '';
		duixiang.value.shippingaddress = loadingPlaces.value[loadingPlaceIndex.value]?.id || '';
	};

	const onUnloadingPlaceChange = (event) => {
		unloadingPlaceIndex.value = event.detail.value;
		formData.value.unloadingaddress = unloadingPlaces.value[unloadingPlaceIndex.value]?.name || '';
		duixiang.value.unloadingaddress = unloadingPlaces.value[unloadingPlaceIndex.value]?.id || '';
	};

	const onCargoChange = (event) => {
		cargoIndex.value = event.detail.value;
		formData.value.cargoname = cargoOptions.value[cargoIndex.value]?.name || '';
		duixiang.value.cargoname = cargoOptions.value[cargoIndex.value]?.id || '';
	};

	const onSupplierChange = (event) => {
		supplierIndex.value = event.detail.value;
		const selectedSupplier = suppliers.value[supplierIndex.value];
		if (selectedSupplier) {
			formData.value.supplierId = selectedSupplier.id;
			formData.value.shipperid = selectedSupplier.id;
			formData.value.supplierName = selectedSupplier.name;
			duixiang.value.shipperid = selectedSupplier.id;
		}
	};

	//跳转亏吨扣费页面
	const navigateToPage = () => {
		uni.navigateTo({
			url: '/pages/sourceofgoods/pageinfo/kuidun'
		});
	}

	//第几个地址
	const addressType = ref('loading');
	//跳转地址蒲
	const openAddressBook = (type) => {
		addressType.value = type;
		uni.navigateTo({
			url: '/pages/sourceofgoods/pageinfo/address?type=1'
		});
	};

	const onStartDateChange = (e) => {
		formData.value.starttime = e.detail.value;
	};

	const onEndDateChange = (e) => {
		formData.value.endtime = e.detail.value;
	};

	const onSwitchChange = (e) => {
		formData.value.isExclusiveSource = e.detail.value;
	};

	const addTransportTeam = () => {
		uni.navigateTo({
			url: '/pages/sourceofgoods/pageinfo/xuanzchedui',
		});
	};

	const removeTeam = (index) => {
		formData.value.selectedTeams.splice(index, 1);
	};

	const validateForm = () => {
		if (!formData.value.shippingaddress || !formData.value.unloadingaddress) {
			uni.showToast({
				title: '请选择完整的运输路线',
				icon: 'none'
			});
			return false;
		}

		if (!formData.value.cargoname) {
			uni.showToast({
				title: '请选择货物名称',
				icon: 'none'
			});
			return false;
		}

		if (!formData.value.totalweight || !/^\d+(\.\d+)?$/.test(formData.value.totalweight) || parseFloat(formData
				.value.totalweight) <= 0) {
			uni.showToast({
				title: '请输入有效的运输总量',
				icon: 'none'
			});
			return false;
		}

		if (!formData.value.unitprice || !/^\d+(\.\d+)?$/.test(formData.value.unitprice) || parseFloat(formData.value
				.unitprice) <= 0) {
			uni.showToast({
				title: '请输入有效的运费单价',
				icon: 'none'
			});
			return false;
		}

		if (!formData.value.supplierId) {
			uni.showToast({
				title: '请选择供应商',
				icon: 'none'
			});
			return false;
		}

		if (formData.value.isExclusiveSource && formData.value.selectedTeams.length === 0) {
			uni.showToast({
				title: '请添加指定车队',
				icon: 'none'
			});
			return false;
		}

		if (formData.value.driverservicerate && !/^\d+(\.\d+)?$/.test(formData.value.driverservicerate) || formData
			.value.driverservicerate < 0) {
			uni.showToast({
				title: '司机服务费率不能为负且必须是数字',
				icon: 'none'
			});
			return false;
		}

		if (formData.value.fuelCost && !/^\d+(\.\d+)?$/.test(formData.value.fuelCost) || formData.value.fuelCost < 0) {
			uni.showToast({
				title: '油费不能为负且必须是数字',
				icon: 'none'
			});
			return false;
		}

		const fieldsToValidate = ['driverservicerate', 'fuelCost', 'informationfee', 'totalweight', 'unitprice'];
		for (let field of fieldsToValidate) {
			if (formData.value[field] && /[a-zA-Z]/.test(formData.value[field])) {
				uni.showToast({
					title: `${field} 不能包含字母`,
					icon: 'none'
				});
				return false;
			}
		}

		return true;
	};

	const validateOrderConditions = () => {
	    const currentDate = new Date();
	    currentDate.setHours(0, 0, 0, 0);
	
	    if (!formData.value.starttime || !formData.value.endtime) {
	        uni.showToast({
	            title: '请选择完整的运输期限',
	            icon: 'none'
	        });
	        return false;
	    }
	
	    const startDate = new Date(formData.value.starttime);
	    const endDate = new Date(formData.value.endtime);
	
	    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
	        uni.showToast({
	            title: '请选择有效的日期格式',
	            icon: 'none'
	        });
	        return false;
	    }
	
	    // 添加时分校验
	    const currentTime = new Date();
	    if (startDate < currentDate) {
	        if (startDate.getDate() === currentDate.getDate()) {
	            if (startDate.getHours() < currentTime.getHours()) {
	                uni.showToast({
	                    title: '开始时间不能早于当前时间',
	                    icon: 'none'
	                });
	                return false;
	            }
	            if (startDate.getHours() === currentTime.getHours() && startDate.getMinutes() < currentTime.getMinutes()) {
	                uni.showToast({
	                    title: '开始时间不能早于当前时间',
	                    icon: 'none'
	                });
	                return false;
	            }
	        } else {
	            uni.showToast({
	                title: '开始时间不能早于今天',
	                icon: 'none'
	            });
	            return false;
	        }
	    }
	
	    if (endDate < startDate) {
	        uni.showToast({
	            title: '结束时间不能早于开始时间',
	            icon: 'none'
	        });
	        return false;
	    }
	
	    return true;
	};
	const validateAndNext = () => {
		if (current.value === 0) {
			if (!validateForm()) return;
			current.value = 1;
		} else if (current.value === 1) {
			if (!validateOrderConditions()) return;
			current.value = 2;
		}
	};

	const chedui = ref([])
	const submitAllData = () => {
		const weight = uni.getStorageSync('weight');
		const fee = uni.getStorageSync('fee');

		console.log(weight, fee);
		duixiang.value.totalweight = formData.value.totalweight;
		duixiang.value.unitprice = formData.value.unitprice;
		duixiang.value.starttime = formData.value.starttime;
		duixiang.value.endtime = formData.value.endtime;
		duixiang.value.driverid = user.user.id;
		duixiang.value.fuelcost = formData.value.fuelCost;
		duixiang.value.lossweight = weight
		duixiang.value.lossprice = fee;
		duixiang.value.configid = peizhidx.value.configid;
		duixiang.value.informationfee = formData.value.informationfee;
		duixiang.value.driverservicerate = formData.value.driverservicerate;

		if (formData.value.isExclusiveSource) {
			duixiang.value.isexclusive = 1;
			chedui.value = formData.value.selectedTeams;
		} else {
			duixiang.value.isexclusive = 0;
		}

		if (validateForm()) {
			if (validateOrderConditions()) {
				console.log('提交所有数据:', duixiang.value);

				if (peizhidx.value.prepaymentratio == 1) {
					uni.navigateTo({
						url: '/pages/sourceofgoods/pageinfo/yucunyunfei?data=' + JSON.stringify(duixiang
							.value) + '&&chedui=' + JSON.stringify(chedui.value),
					});
					uni.setStorageSync('duixiang', formData.value);
				} else {
					uni.showToast({
						title: '平台垫资',
						icon: 'none',
						duration: 2000,
					});
				}
			} else {
				uni.showToast({
					title: '请选择完整的运输期限',
					icon: 'none',
					duration: 2000,
				});
			}
		} else {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none',
				duration: 2000,
			});
		}
	};

	//清空表单
	const resetForm = () => {
		formData.value = {};
		current.value = 0;
		uni.removeStorageSync('weight');
		uni.removeStorageSync('fee');
	};

	const peizhi = async () => {
		const res = await http({
			url: '/shipperConfig/select/' + user.user.id,
			method: 'GET',
		});
		console.log('配置信息');
		console.log(res);
		if (res.code === 20041) {
			peizhidx.value = res.shuju;
			formData.value.driverservicerate = res.shuju.driverservicerate;
			formData.value.fuelcost = res.shuju.fuelcost;
		} else {
			uni.showToast({
				title: '货源配置获取失败',
				icon: 'none',
			});
		}
	}

	onShow(() => {
		console.log('页面显示');

		const chedui = uni.getStorageSync('chedui');
		const huowu = uni.getStorageSync('dizhi');
		console.log(addressType.value);

		if (huowu && huowu.zanjduan) {
			if (addressType.value === 'loading') {
				console.log('设置起运地');
				formData.value.shippingaddress = huowu.zanjduan[0].stationName;
				duixiang.value.shippingaddress = huowu.zanjduanid;
			} else if (addressType.value === 'unloading') {
				console.log('设置卸货地');
				formData.value.unloadingaddress = huowu.zanjduan[0].stationName;
				duixiang.value.unloadingaddress = huowu.zanjduanid;
			}
		} else {
			console.warn('地址信息为空或不完整：', huowu);
		}

		if (chedui) {
			formData.value.selectedTeams = chedui;
		} else {
			console.warn('未选择车队');
		}
		uni.removeStorageSync('chedui');
		uni.removeStorageSync('dizhi');
	});

	onMounted(() => {
		fetchData();
		peizhi();
	});
</script>

<style lang="scss" scoped>
	.input-wrapper {
	  width: 400rpx;
	  margin: 10rpx;
	  padding: 10rpx;
	  border-radius: 5rpx;
	  transition: all 0.3s ease;
}
	
	.form-subtitle {
		font-size: 21rpx;
		padding-left: 20rpx;
		color: #ff0000;
	}

	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #e5e5e5;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 0;
	}

	.tab-item {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 20rpx;
		position: relative;

		&.active {
			color: #007aff;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				bottom: -22rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #007aff;
				border-radius: 2rpx;
			}
		}
	}

	.content-section {
		width: 100%;
	}

	/* 表单通用样式 */
	.form-item,
	.form-card,
	.form-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.wenzi {
			font-size: 35rpx;
			color: #007aff;
			margin-bottom: 20rpx;
			display: block;
		}
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.label {
		width: 200rpx;
		font-size: 28rpx;
		color: #333;
	}

	.value {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #999;
	}

	.input-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding-right: 10rpx;
	}

	.unit {
		font-size: 26rpx;
		color: #999;
		margin-right: 20rpx;

		&.red {
			color: #f00;
			margin-right: -10rpx;
		}
	}

	.picker-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.picker-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.address-picker {
		flex: 1;
	}

	.picker {
		flex: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666;
	}

	.uni-icons {
		margin-left: 8rpx;
	}

	.address-book {
		font-size: 24rpx;
		color: #007aff;
		padding: 20rpx;
		white-space: nowrap;
	}

	.date-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.date-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
	}

	.switch-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.switch-label {
		flex: 1;

		.description {
			font-size: 24rpx;
			color: #999;
			display: block;
		}
	}

	.primary-btn {
		background-color: #007aff;
		color: #fff;
		font-size: 30rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 40rpx;
		width: 100%;
		border: none;
	}

	.secondary-btn {
		background-color: #f0f0f0;
		color: #007aff;
		font-size: 28rpx;
		padding: 16rpx;
		border-radius: 8rpx;
		text-align: center;
		width: 100%;
		border: none;
		margin-top: 20rpx;
	}

	.btn {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		border-radius: 10rpx;
		font-size: 25rpx;
		margin-top: 50rpx;
		margin-right: 10rpx;
	}

	/* 确认页面专用样式 */
	.confirm-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-header {
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.card-body {
			padding: 30rpx;
		}
	}

	.confirm-row {
		display: flex;
		margin-bottom: 24rpx;
		align-items: center;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.confirm-label {
		width: 180rpx;
		font-size: 28rpx;
		color: #666;
	}

	.confirm-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-top: -7rpx;
	}

	.confirm-values {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-top: -7rpx;
		margin-left: 350rpx;
	}

	/* 运输线路特殊样式 */
	.route-info {
		display: flex;
		flex-direction: column;
	}

	.time {
		font-size: 26rpx;
		color: #f00;
		margin-bottom: 12rpx;
		background-color: #eff3ff;
		padding: 10rpx 20rpx;
	}

	.time1 {
		font-size: 26rpx;
		color: #f00;
		margin-bottom: 12rpx;
		background-color: #ffe3e3;
		padding: 10rpx 20rpx;
	}

	.address-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.address-tag {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		border-radius: 50%;
		font-size: 22rpx;
		margin-right: 12rpx;

	}

	.address-tag1 {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #f00;
		color: #fff;
		border-radius: 50%;
		font-size: 22rpx;
		margin-right: 12rpx;

	}

	.address {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		line-height: 1.4;
	}

	/* 货物信息样式 */
	.goods-name {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.goods-weight {
		font-size: 26rpx;
		color: #666;
	}

	.confirm-yuan {
		font-size: 26rpx;
		color: #f00;
	}

	.textwenzi {
		color: #f00;
	}

	.team-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx dashed #eee;
	}

	/* 车队卡片样式 */
	.team-card .team-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx dashed #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.team-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.team-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;

	}

	.team-details {
		display: flex;
		flex-direction: column;
	}

	.team-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.team-count {
		font-size: 24rpx;
		color: #999;
	}

	.remove-btn {
		color: #f56c6c;
		font-size: 26rpx;
		padding: 8rpx 16rpx;
		border-radius: 6rpx;
		background-color: #fff5f5;
	}

	/* 确认按钮样式 */
	.confirm-btn {
		background-color: #007aff;
		color: white;
		border-radius: 50rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		width: 100%;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	}

	@media (min-width: 768px) {
		.container {
			padding: 40rpx;
			max-width: 750px;
			margin: 0 auto;
		}

		.tabs {
			padding: 30rpx 0;
		}

		.tab-item {
			font-size: 32rpx;
			padding: 15rpx 30rpx;
		}

		.form-item,
		.form-card,
		.form-section {
			padding: 40rpx;
		}

		.label {
			font-size: 32rpx;
		}

		.input,
		.picker {
			font-size: 30rpx;
			padding: 25rpx;
		}

		.primary-btn {
			font-size: 34rpx;
			padding: 25rpx;
		}
	}
</style>